<template>
  <div>
      <h2>Count component</h2>
      <h3>当前的和为：{{sum}}</h3>
      <h3>调用getters：{{complicatedLogic}}</h3>
      <h3>我在{{school}}学习{{subject}}</h3>
      <select v-model.number="n">
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
      </select>
      <button @click="increment(n)">+</button>
      <button @click="decrement">-</button>
      <button @click="incrementOdd">当前和为奇数+</button>
      <button @click="incrementWait">等一等再+</button>
      <p>person组件中的最后一个人为：{{personList[personList.length-1].name}}</p>
  </div>
</template>

<script>
import {mapGetters, mapState, mapMutations} from 'vuex'
export default {
    data(){
        return {
            n:1
        }
    },
    computed:{
        //可以在这里写好mapstate,简化template,否则需要写各种computed属性
        //或者在template里写 {{#store.state.xxxxx}}   passing a object
        ...mapState({sum:'sum',school:'school',
                    subject:'subject',personList:'personList'}),
        //简写====>
        //...mapState(['sum','school','subject'])
        ...mapGetters(['complicatedLogic'])
    },
    methods:{
        // increment(){
        //     this.$store.dispatch('jia',this.n)
        //     //this.$store.commit('JIA',this.n)
        // }, 
         //可以使用mapMutations mapActions
        ...mapMutations({
            increment:'JIA'   
        }),
        decrement(){
            this.$store.dispatch('jian',this.n)
        },     
        incrementOdd(){

        },
        incrementWait() {
            setTimeout(()=>{
                this.$store.commit('JIA',this.n)
            },1500)
        }
    }
}
</script>

<style>

</style>